<template>
  <div class="lawyer h100">
    <div
      class="top"
      :style="{
        backgroundImage: 'url(' + listdata[0].url + ')',
        'background-repeat': 'no-repeat',
        'background-size': 'cover',
      }"
    >
      <a @click="back">
        <van-icon name="arrow-left" size="0.32rem" color="#999999" />
      </a>
      <div class="leftnews">
        <h5>{{ listdata[0].name }}</h5>
        <p>专职律师<img src="/img/Ke_img/Lawyer/精选.png" alt="" /></p>
        <span>家庭婚姻</span>
        <span>借款贷款</span>
        <span>劳动工伤</span>
      </div>
      <div class="rightnews">
        <img src="/img/Ke_img/Lawyer/组30.png" alt="" />
        <span>
          <b>11万+</b>
          <p>帮助人数</p>
        </span>
        <span>
          <b>11</b>
          <p>执业年限</p>
        </span>
      </div>
    </div>
    <div class="style">
      <div class="talk">
        <h2>{{ listdata[0].service }}-{{ listdata[0].serviceDetail }}</h2>
        <p>
          {{ listdata[0].serviceContent }}
        </p>
        <p><b>￥{{msg}}</b>律所价格：<i style="line-through">￥{{msg2}}</i></p>
      </div>
      <h1 class="serve">
        服务保障
        <span>
          <img src="/img/Ke_img/Lawyer/形状3.png" alt="" /><b>100%满意计划</b>
          <img src="/img/Ke_img/Lawyer/形状3.png" alt="" /><b>资质担保</b>
          <img src="/img/Ke_img/Lawyer/形状3.png" alt="" /><b>资质金担保</b
          >&nbsp;>
        </span>
      </h1>
      <h1 class="servetitle">选择服务</h1>
      <div class="choose">
        <a class="ceshi" @click="msg=item,msg2=commonlist[index]"
        :class="{active:item==msg}" 
         v-for="(item,index) in pricelist" :key="index"
          >在线咨询
          <p :class="{active2:item==msg}">￥{{item}}起</p></a
        >
      </div>
      <h1 class="userpj">
        用户评价<span><b>1546条</b><button @click="goPj">></button></span>
      </h1>
      <div class="main1">
        <a class="pingjia">
          <img src="" alt="" />
          <div class="right">
            <h1>1234****4453</h1>
            <p>2021/11/11 <b>在线咨询</b></p>
            <span>律师专业，哈哈哈哈哈哈哈</span>
          </div>
        </a>
      </div>
      <h1 class="morepj">查看更多评价</h1>
      <div class="main2">
        <h1>个人介绍</h1>
        <div class="main2news">
          <div class="left">
            <img src="/img/Ke_img/Lawyer/形状565.png" alt="" />
            <img
              class="line line1"
              src="/img/Ke_img/Lawyer/组53(1).png"
              alt=""
            />
            <img src="/img/Ke_img/Lawyer/形状564.png" alt="" />
            <img
              class="line line2"
              src="/img/Ke_img/Lawyer/组53(3).png"
              alt=""
            />
            <img src="/img/Ke_img/Lawyer/形状563.png" alt="" />
            <img
              class="line line3"
              src="/img/Ke_img/Lawyer/直线568拷贝2"
              alt=""
            />
            <img src="/img/Ke_img/Lawyer/组43.png" alt="" />
            <img
              class="line line4"
              src="/img/Ke_img/Lawyer/组53(2).png"
              alt=""
            />
            <img src="/img/Ke_img/Lawyer/形状566.png" alt="" />
            <img src="/img/Ke_img/Lawyer/组53(4).png" alt="" />
          </div>
          <div class="right">
            <a>
              <h2>资质认证</h2>
              <p>专职律师</p>
            </a>
            <img class="one" src="/img/Ke_img/Lawyer/组53(5).png" alt="" />
            <img class="two" src="/img/Ke_img/Lawyer/组49.png" alt="" />
            <a>
              <h2>任职律所</h2>
              <p>上海商正律师事务所</p>
            </a>
            <a>
              <h2>教育背景</h2>
              <p>本科</p>
            </a>
            <a>
              <h2>擅长领域</h2>
              <p>家庭婚姻：离婚、夫妻财产/债务、抚养、彩 礼、婚前财产争议</p>
              <p>借款借贷：借钱不还、高利贷、网络借贷、担保抵押</p>
              <p>劳动工伤：未签合同、辞职解雇、工伤赔偿、劳动仲裁、劳动诉讼</p>
            </a>
            <a>
              <h2>个人履历</h2>
              <p>
                我是王永健，律师中的常胜将军，也是您法律服务的及时雨。
                中国政法大学硕士毕业，现执业于广东海厚律师事务所，
                在律师馆平台中，已为80000多人提供过法律服务，
                好评多达13000多条，在律师馆排在首席位置。 经过十年的律师执业经
                验，亲历了一个又一个的案件，
                我相信律师的天职是为当事人发声，为正义护航。
                我认为每一一个当事人的法律维权意识都应该觉醒，
                都应该得到应有的维护，一个个小家的合法权益得到维护，
                定能实现整个国家的公平正义。 而您可以通过我的专业，
                正直，诚信，让您的合法权益最大化。 相信我，有困难找卢律师!
                擅长领域
              </p>
            </a>
            <a>
              <h2>荣誉证书</h2>
            </a>
            <img class="three" src="/img/Ke_img/Lawyer/组48.png" alt="" />
            <img class="four" src="/img/Ke_img/Lawyer/组50.png" alt="" />
          </div>
        </div>
      </div>
      <div class="main3">
        <h2>咨询须知</h2>
        <p>
          <span>1、正规性</span>平台上的律师都是具有由司法局颁发律
          师执业证的正规律师。
        </p>
        <p>
          <span>2、保密性</span>律师对当事人有保守隐私的义务，即使
          与律师间不是委托代理关系，也不能泄露他人的隐私。
        </p>
        <p>
          <span>3、安全性</span>担保交易，服务验收后，平台再将服务
          费转入律师的账户。
        </p>
        <p>
          <span>4、咨询方式</span>平台咨询分为图文和电话两种形式，
          具体的咨询方式，以及服务时长可根据自身需求选择。
        </p>
        <p>
          <span>5、如何计算时间</span
          >订单支付成功不会开始算时间，只有律师确认受理订单，正式解答才开始算时间的。1天是指24小时。
        </p>
      </div>
    </div>

    <div class="bottom">
      <a
        ><img @click="isshow=false" v-show="isshow"  src="/img/Ke_img/爱心.png" alt="" /><img @click="isshow=true" v-show="!isshow" src="/img/Ke_img/爱心(1).png" alt="">
        <p>收藏</p></a
      >
      <a
        ><img @click="isshow1=false" v-show="isshow1"  src="/img/Ke_img/收藏.png" alt="" /><img @click="isshow1=true" v-show="!isshow1" src="/img/Ke_img/收藏(1).png" alt="">
        <p>点赞</p></a
      >
      <button @click="gotalk">
        <img src="/img/Ke_img/Lawyer/组53(6).png" alt="" />
      </button>
      <button @click="showPopup()">
        <img src="/img/Ke_img/Lawyer/组53(7).png" alt="" />
      </button>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-card
        :price="price"
        :desc="listdata[0].serviceContent"
        title="在线咨询"
        :thumb="listdata[0].url"
      />
      <div class="van-popup-two">
        <h1>服务类型</h1>
        <div>
          <p
            v-for="(item, index) in list"
            :key="index"
            :class="{ active: activeInfo.active1 === item.id }"
            @click="choose1(item.id)"
          >
            {{ item.name }}
          </p>
        </div>
      </div>
      <div class="van-popup-two">
        <h1>服务类型</h1>
        <div>
          <p
            v-for="(item, index) in list2"
            :key="index"
            :class="{ active: activeInfo.active2 === item.id }"
            @click="choose2(item.id)"
          >
            {{ item.name }}
          </p>
        </div>
      </div>
      <p class="van-popup-three" @click="gopay">
        <img src="@/assets/Di/组 46.png" alt="" />
      </p>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      msg:"68",
      msg2:"300",
      commonlist:["100","150","700","1500"],
      pricelist:["68","98","666","1200"],
      coverImgUrl: "",
      isshow1:true,
      isshow:true,
      show: false,
      list: [
        {
          id: 1,
          name: "在线咨询",
        },
        {
          id: 2,
          name: "电话咨询",
        },
        {
          id: 3,
          name: "合同文书",
        },
      ],
      list2: [
        {
          id: 1,
          name: "1天",
        },
        {
          id: 2,
          name: "3天",
        },
      ],
      activeInfo: {
        active1: 1,
        active2: 1,
      },
      price: "68",
    };
  },
  watch: {
    activeInfo: {
      deep: true,
      handler(val) {
        // console.log(this.listdata);
        const data = this.listdata.filter(
          (item) => item.tId == val.active1 && item.dId == val.active2
        );
        this.price = data[0].price;
      },
    },
  },
  computed: {
    ...mapState("di", ["name", "listdata"]),
  },
  created() {
    this.refresh();
  },
  methods: {
    ...mapActions("di", ["refresh"]),
    showPopup() {
      this.show = true;
    },
    choose1(id) {
      this.activeInfo.active1 = id;
    },
    choose2(id) {
      this.activeInfo.active2 = id;
    },
    back() {
      // 返回
      this.$router.push("/home/index");
    },
    goPj() {
      this.$router.push("/home/index/lawyer/pj");
    },
    gotalk(){
      this.$router.push("/chat");
    },
    gopay() {
      this.$router.push("/purchase");
    },
  },
};
</script>

<style scoped lang="scss">

// .active {
//   background-color: #ffd900;
//   color: white;
// }
//弹出层
.van-popup {
  height: 9.26rem;
  .van-card__price {
    color: #d51818;
  }
  .van-popup-two {
    h1 {
      font-size: 0.32rem;
      margin: 0.32rem 0 0.25rem 0.45rem;
    }
    div {
      margin: 0 0.45rem;
      display: flex;

      p {
        width: 1.96rem;
        height: 0.82rem;
        text-align: center;
        line-height: 0.82rem;
        font-size: 0.3rem;
        color: #999999;
        background-color: #efefef;
        margin-right: 0.36rem;
        &:last-of-type {
          margin-right: 0;
        }
      }
      .active {
        background-color: #ffd900;
        color: white;
      }
    }
  }
  .van-popup-three {
    margin-top: 1.14rem;
    text-align: center;
    img {
      width: 4.98rem;
      height: 0.9rem;
    }
  }
}
.lawyer {
  display: flex;
  flex-direction: column;
}
.style {
  padding-left: 0.3rem;
}
.top {
  height: 5.1rem;
  position: relative;
  background-position: center;
}
.top .leftnews {
  margin: 3.2rem 0 0 0.8rem;
}
.top .leftnews h5 {
  font-size: 0.42rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.top .leftnews p {
  font-size: 0.28rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.top .leftnews p img {
  width: 0.72rem;
  height: 0.24rem;
}
.top .leftnews span {
  width: 0.98rem;
  height: 0.31rem;
  font-size: 0.2rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  background-color: #999999;
  margin-right: 0.1rem;
}
.top .rightnews img {
  height: 0.94rem;
  width: 0.94rem;
  position: absolute;
  right: 0.3rem;
  bottom: 2rem;
}
.top .rightnews span:nth-of-type(1) {
  position: absolute;
  right: 0.3rem;
  bottom: 0;
  color: #ffffff;
  text-align: center;
}
.top .rightnews span p {
  font-size: 0.24rem;
}
.top .rightnews span:nth-of-type(2) {
  position: absolute;
  right: 2rem;
  bottom: 0;
  color: #ffffff;
  text-align: center;
}
.talk {
  margin-top: 0.2rem;
}
.talk h2 {
  font-size: 0.36rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #333333;
}
.talk h2 p {
  font-size: 0.28rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.talk p b {
  font-size: 0.48rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ee121c;
  margin-right: 0.2rem;
}
.talk p i {
  font-family: PingFang SC;
  font-weight: 400;
  text-decoration: line-through;
  color: #666666;
}
/* 服务保障 */
.serve {
  font-size: 0.3rem;
  font-family: PingFang SC;
  font-weight: 400;
  height: 0.8rem;
  color: #666666;
  margin: 0.2rem 0;
}
.serve span {
  font-size: 0.22rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  float: right;
}
.serve span img {
  width: 0.23rem;
  height: 0.23rem;
}
.serve span b {
  margin-right: 0.2rem;
}
/* 选择服务 */
.servetitle {
  font-size: 0.3rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  margin: 0.2rem 0;
}
.choose {
  display: flex;
  justify-content: space-around;
}
.choose a {
  width: 1.62rem;
  height: 0.82rem;
  border: 1px solid;
  text-align: center;
  padding-top: 0.3rem;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}
.choose a p {
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
}
/* 用户评价 */
.userpj {
  font-size: 0.36rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #333333;
  margin: 0.2rem 0;
}
.userpj span {
  float: right;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}
.userpj span b {
  margin-right: 0.2rem;
}
.main1 {
  display: flex;
  flex-direction: column;
}
.main1 .pingjia {
  height: 1.8rem;
  display: flex;
}
.main1 .pingjia img {
  height: 0.9rem;
  width: 0.9rem;
}
.main1 .pingjia .right {
  flex: 1;
  margin-left: 0.1rem;
}
.main1 .pingjia .right h1 {
  font-size: 0.3rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.main1 .pingjia .right p {
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  margin: 0.1rem 0;
}
.main1 .pingjia .right p b {
  margin-left: 0.2rem;
}
.main1 .pingjia .right span {
  font-size: 0.3rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.morepj {
  font-size: 0.3rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}
/* 个人介绍 */
.main2 h1 {
  margin: 0.2rem 0;
  font-size: 0.36rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #333333;
}
.main2 .main2news {
  display: flex;
  justify-content: space-around;
}
.main2 .main2news .left {
  width: 0.4rem;
  display: flex;
  flex-direction: column;
}
.main2 .main2news .left img {
  width: 0.37rem;
}
.main2 .main2news .left .line {
  margin-left: 0.15rem;
}
.main2 .main2news .left .line1 {
  width: 0.05rem;
  height: 2.52rem;
}
.main2 .main2news .left .line2 {
  width: 0.04rem;
  height: 1rem;
}
.main2 .main2news .left .line3 {
  width: 0.01rem;
  height: 0.93rem;
}
.main2 .main2news .left .line4 {
  width: 0.05rem;
  height: 3.19rem;
}
.main2 .main2news .right {
  flex: 1;
  position: relative;
}
.main2news .right .one {
  width: 2.51rem;
  height: 5.58rem;
  position: absolute;
  top: -1.2rem;
  left: 0.6rem;
}
.main2news .right .two {
  width: 2.15rem;
  height: 4.78rem;
  position: absolute;
  top: -0.8rem;
  right: 1.5rem;
}
.main2news .right .three {
  width: 2.12rem;
  height: 4.73rem;
  position: absolute;
  bottom: -2.3rem;
  left: 0.6rem;
}
.main2news .right .four {
  width: 2.3rem;
  height: 5.11rem;
  position: absolute;
  bottom: -3rem;
  right: 1.5rem;
}
.main2news .right a {
  display: block;
  width: 5.64rem;
  padding-left: 0.4rem;
  background: #eeeeee;
  margin-bottom: 0.72rem;
}
.main2news .right a:nth-of-type(2) {
  margin-top: 1.9rem;
}
.main2news .right a:nth-of-type(6) {
  margin-top: 3.9rem;
}
.main2news .right h2 {
  font-size: 0.32rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #333333;
}
.main2news .right p {
  font-size: 0.26rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.main3 {
  margin-top: 1.5rem;
}
.main3 h2 {
  font-size: 0.36rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #333333;
}
.main3 p {
  margin: 0.1rem 0;
}
.main3 p span {
  font-size: 0.3rem;
  color: black;
  font-weight: 800;
  margin-right: 0.5rem;
}
/* 底部 */
.bottom {
  position: fixed;
  padding-left: 0.5rem;
  bottom: 0;
  background: #ffffff;
  width: 100%;
}
.bottom a img {
  width: 0.42rem;
  height: 0.38rem;
}
.bottom a {
  float: left;
  margin: 0.1rem;
  margin-right: 0.2rem;
}
.bottom a p {
  font-size: 0.26rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}
.bottom button {
  border: none;
  margin: 0.1rem;
  background-color: rgba(255, 0, 0, 0);
}
.bottom button img {
  width: 1.8rem;
  height: 0.7rem;
}
.active{
  color: red!important;
  border:1px solid #ee121c!important;
}
.active2{
  color: red!important;
}
</style>